<template>
  <div style="height: 100%;width: 100%;position: relative;overflow: hidden;" :style="{'background':!!lineChart6Data.back?lineChart6Data.back:'#fff'}" :id="lineChart6Data.id" class="_wz_char">

  </div>
</template>
<script>
export default {
  props: ["bottomHeight", "lineChart6Data"],//接收来自父组件的数据
  data() {
    return {}
  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    let that = this;
    let data = that.lineChart6Data.data;

    let chart = new G2.Chart({
      container: that.lineChart6Data.id,
      forceFit: true,
      height: that.bottomHeight,
      padding: !!that.lineChart6Data.style.padding ? that.lineChart6Data.style.padding : 'auto'
    });
    chart.source(data);
    chart.scale('value', {
      alias: that.lineChart6Data.unit,
      min: 0,
    });
    chart.axis('type', {
      label: {
        textStyle: {
          fill: '#aaaaaa'
        }
      },
      tickLine: {
        alignWithLabel: false,
        length: 0
      }
    });

    chart.axis('value', {
      label: {
        textStyle: {
          fill: '#aaaaaa'
        }
      }
    });
    chart.legend({
      position: 'top-center'
    });
    chart.scale('type', {
      type: 'cat'
    });

    chart.interval().position('type*value').color('company').opacity(1).adjust([{
      type: 'dodge',
      marginRatio: 1 / 32
    }]);


    //chart.interval().position('type*value').color('company').opacity(1).label('value');


    chart.render();
  },
  methods: {//执行的方法

  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
